<template>
  <div v-if="showClass" style="margin-top: 20px;">
    <el-table
      ref="table"
      :data="tableData"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :header-cell-style="{'background':'#f2f3f4', 'color':'#555', 'font-weight':'bold', 'line-height':'32px'}"
      row-key="id"
      border
      empty-text="暂无相关数据！"
      default-expand-all
    >
      <el-table-column label="班级名称" prop="title" />
      <el-table-column label="应考人数" prop="totalUser" align="center" />
      <el-table-column label="实考人数" prop="actualUser" align="center" />
      <el-table-column label="通过人数" prop="passUser" align="center" />
      <el-table-column label="通过率" align="center">
        <template scope="scope">
          {{ scope.row.passRate }}%
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
      >
        <template v-slot="scope">
          <div v-loading="scope.row.loading">
            <el-link type="primary" icon="el-icon-view" @click="showPaper(scope.row.id, scope.$index)">AI考试分析</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible="showPerAnalysis" :before-close="()=>showPerAnalysis=false" title="AI班级考试分析结果" width="65%">
      <vue-office-docx :src="personPaper?baseUrl+'/upload/file/'+personPaper.examText:''" class="full"/>
      <el-button type="primary" size="medium" class="downLoadBtn" @click="downLoadRes">下载</el-button>
    </el-dialog>
  </div>
</template>
<script>
import { apiStatDepartTree } from '@/api/stat/exam'
import VueOfficeDocx from '@vue-office/docx'
import { postData } from '@/api/common'
export default {
  components: { VueOfficeDocx },
  props: {
    examId: String,
    showClass: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableData: [],
      listLoading: true,
      listQuery: {
        examId: ''
      },
      showPerAnalysis: false,
      personPaper: null,
      windowHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      baseUrl: ''
    }
  },
  created() {
    this.listQuery.examId = this.examId
    this.getList()
  },
  mounted() {
    this.baseUrl = process.env.VUE_APP_BASE_API
  },
  methods: {
    getList() {
      if (!this.listQuery.examId) {
        return
      }

      this.listLoading = true
      apiStatDepartTree(this.listQuery).then(response => {
        response.data.map(item => { item.loading = false })
        this.tableData = response.data
        this.listLoading = false
      }).catch(err => {
        console.log(err)
        this.listLoading = false
      })
    },
    showPaper(id, index) {
      this.tableData[index].loading = true
      // classId: '1581176374044532737', ExamId: '1821033413491036161'
      postData('/api/stat/exam/class-ai', { classId: id, ExamId: this.examId }).then(res => {
        this.tableData[index].loading = false
        this.personPaper = res.data
        if (!res.data.examText) {
          this.$message.error('考试分析失败！')
          return
        }
        this.showPerAnalysis = true
      }).catch(err => {
        console.log(err)
        this.tableData[index].loading = false
      })
    },
    downLoadRes() {
      const path = this.baseUrl + '/upload/file/' + this.personPaper.examText
      let link = document.createElement('a')
      link.href = path
      link.download = this.personPaper.examText.split('/')[this.personPaper.examText.split('/').length - 1]
      link.click()
      link = null
      this.$message.success('下载成功!')
    }
  }
}
</script>
<style scoped lang="scss">
.full {
  width: 100%;
  height: 100%;
}
.downLoadBtn {
  width: 120px;
  margin: 10px 50% 0;
}
</style>
